<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form :form="form" @submit="handleSubmit" >
        <a-form-item label="父菜单ID" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <el-input v-decorator="[ 'parentId', ]" ></el-input>
        </a-form-item>
        <a-form-item label="菜单名称" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <el-input v-decorator="[ 'name', ]" ></el-input>
        </a-form-item>
        <a-form-item label="路由地址" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <el-input v-decorator="[ 'path', ]" ></el-input>
        </a-form-item>
        <a-form-item label="页面名称" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <el-input v-decorator="[ 'pageName', ]" ></el-input>
        </a-form-item>
        <a-form-item label="权限标识" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <el-input v-decorator="[ 'perms', ]" ></el-input>
        </a-form-item>
        <a-form-item label="菜单类型（0目录 1菜单 2按钮）" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <el-input v-decorator="[ 'type', ]" ></el-input>
        </a-form-item>
        <a-form-item label="显示顺序" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <el-input v-decorator="[ 'orderNum', ]" ></el-input>
        </a-form-item>
        <a-form-item label="是否末级" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <el-input v-decorator="[ 'isLeaf', ]" ></el-input>
        </a-form-item>
        <a-form-item label="Level" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <el-input v-decorator="[ 'level', ]" ></el-input>
        </a-form-item>
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <el-input v-decorator="[ 'remark', ]" ></el-input>
        </a-form-item>
      <a-form-item v-bind="buttonCol" >
        <a-row>
          <a-col span="6">
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-col>
          <a-col span="8"></a-col>
        </a-row>
      </a-form-item>
    </a-form>
  </a-card>
</template>
<script>
  import {require,pattern} from '../../utils/rules';
  import {saveOne,getDetail} from "../../api/adminMenu";
  import pick from 'lodash.pick'

  export default {
    name:"AdminMenu",
    components: {  },
    data() {
      return{
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        },
        buttonCol: {
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12, offset: 5 }
          }
        },
        pageTitle: '新增菜单',
        loading: false,
        isSubmitLoading: false,
        form: this.$form.createForm(this),
        id: 0,
        rules:{}
      }
    },
    methods: {
      handleSubmit(e) {
        e.preventDefault()
        this.form.validateFields(async (err, values) => {
          if(!err){
            let resp = await saveOne({entity:Object.assign({id: this.id},values)})
            if(this.validResp(resp)){
              this.$message.success(resp.msg);
              this.$router.push({name: 'AdminMenuList'});
            }
          }
        })
      },
      async loadModel(){
        const { form } = this
        let id  =   this.$route.query.id || 0
        if(id > 0){
          this.id  = id
          let resp = await getDetail({id:id})
          if(this.validResp(resp)){
            this.pageTitle = "编辑菜单"
            let keys = [
              'parentId',
              'name',
              'path',
              'pageName',
              'perms',
              'type',
              'orderNum',
              'isLeaf',
              'level',
              'remark',
            ]
            let formData = pick(resp.data.model, keys)
            form.setFieldsValue(formData)
          }
        }else {
        }
      },
    },
    mounted() {
      this.loadModel()
    }
  }
</script>
